<template>
  <section class="Order">
    <el-tabs type="border-card" value="当前委托" v-model="type" @tab-click="typehide">
      <el-tab-pane :label="$t('order[19]')" name="1">
        <el-table :data="requestData1.data" style="width: 100%">
          <el-table-column prop="name" :label="$t('order[2]')" width="150" align="center"></el-table-column>
          <el-table-column prop="type" :label="$t('order[3]')" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 1">
                {{ $t("order[4]") }}
              </span>
              <span v-else>
                {{ $t("order[5]") }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="otype" :label="$t('tranorder[0]')" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.otype == 1">
                {{ $t("tranorder[1]") }}
              </span>
              <span v-else>
                {{ $t("tranorder[2]") }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" :label="$t('order[6]')" min-width="170" align="center"></el-table-column>
          <el-table-column prop="wtprice" :label="$t('order[8]')" width="150" align="center"></el-table-column>
          <el-table-column prop="wtnum" :label="$t('tranorder[3]')" width="150" align="center">
            <template slot-scope="scope">
              {{ replaceE(scope.row.wtnum) }}
            </template>
          </el-table-column>

          <el-table-column prop="total_price" :label="$t('order2[3]')" width="150" align="center">
          </el-table-column>
          <el-table-column prop="cjprice" :label="$t('tranorder[4]')" width="150" align="center"></el-table-column>
          <el-table-column prop="cjnum" :label="$t('tranorder[5]')" width="150" align="center"></el-table-column>
          <el-table-column prop="status" :label="$t('tranorder[6]')" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">
                <!-- 待交易-->
                {{ $t("tranorder[7]") }}
              </span>
              <span v-else-if="scope.row.status == 1">
                <!-- 交易中-->
                {{ $t("tranorder[8]") }}
              </span>
              <span v-else-if="scope.row.status == 2">
                <!-- 交易完成-->
                {{ $t("tranorder[9]") }}
              </span>
              <span v-else-if="scope.row.status == 3">
                {{ $t("tranorder[10]") }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="address" :label="$t('order[16]')" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handlecancellations(scope.row)">{{ $t("order[20]") }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <PagesSize v-if="part" :content="requestData1" @func="getMsgFormSon"></PagesSize>
      </el-tab-pane>
      <el-tab-pane :label="$t('order2[0]')" name="2">
        <el-table :data="requestData2.data" style="width: 100%">
          <el-table-column prop="name" :label="$t('order[2]')" width="150" align="center"></el-table-column>
          <el-table-column prop="type" :label="$t('order[3]')" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 1">
                {{ $t("order[4]") }}
              </span>
              <span v-else>
                {{ $t("order[5]") }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="otype" :label="$t('tranorder[11]')" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.otype == 1">
                {{ $t("tranorder[1]") }}
              </span>
              <span v-else>
                {{ $t("tranorder[2]") }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" :label="$t('order[6]')" min-width="150" align="center"></el-table-column>
          <el-table-column prop="wtprice" :label="$t('order[8]')" width="150" align="center"></el-table-column>
          <el-table-column prop="wtnum" :label="$t('tranorder[12]')" width="150" align="center">
            <template slot-scope="scope">
              {{ replaceE(scope.row.wtnum) }}
            </template>
          </el-table-column>
          <el-table-column prop="total_price" :label="$t('order2[3]')" width="150" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.otype == 2 && scope.row.type == 1">
                <!-- 市价买入-->
                {{ scope.row.total_price }}
              </span>
              <span v-else>
                {{ $public.Multiplication(scope.row.cjnum, scope.row.cjprice) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="cjprice" :label="$t('tranorder[13]')" width="150" align="center"></el-table-column>
          <el-table-column prop="cjnum" :label="$t('tranorder[14]')"  align="center"></el-table-column>
          <el-table-column prop="fee" label="手续费" align="center"></el-table-column>
          <el-table-column prop="status" :label="$t('tranorder[15]')" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">
                {{ $t("tranorder[7]") }}
              </span>
              <span v-else-if="scope.row.status == 1">
                {{ $t("tranorder[8]") }}
              </span>
              <span v-else-if="scope.row.status == 2">
                {{ $t("tranorder[9]") }}
              </span>
              <span v-else-if="scope.row.status == 3">
                {{ $t("tranorder[10]") }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" v-if="false">
            <template>
              <el-button size="text" type="primary" @click="detailShow=true">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <PagesSize v-if="part" :content="requestData2" @func="getMsgFormSon"></PagesSize>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="详情" width="40%" top="25vh" :visible.sync="detailShow">
      <div class="history-box">
        <el-table>
          <el-table-column label="成交时间"></el-table-column>
          <el-table-column label="成交价"></el-table-column>
          <el-table-column label="成交量"></el-table-column>
          <el-table-column label="手续费"></el-table-column>
        </el-table>        
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { bcancellations } from "@/api/contract";
import { createOrder, tranData, cancellations } from "@/api/exchange";
import { getToken, multiplys } from "@/libs/util";
import PagesSize from "_dom/paging";
import _ from "lodash";
export default {
  name: "contractorder",
  props: ["part", "codetype"],
  data() {
    return {
      tableData: "",
      dialogVisible: false,
      type: "1",
      timer: null,
      requestData1: [],
      requestData2: [],
      changedata: {
        page: "1",
        wid: "1",
      },
      code: "",
      detailShow:false
    };
  },
  watch: {
    codetype(newValue, oldValue) {
      this.code = newValue;
      if (getToken("token")) {
        this.typget();
      }
    },
  },
  methods: {
    // 去除科学计数法
    replaceE(num) {
      let str = num.toString();
      let reg = /^(\d+)(e)([\-]?\d+)$/;
      let arr,
        len,
        zero = "";
      if (!reg.test(str)) {
        return num;
      } else {
        arr = reg.exec(str);
        len = Math.abs(arr[3]) - 1;
        for (let i = 0; i < len; i++) {
          zero += "0";
        }
        return "0." + zero + arr[1];
      }
    },
    handlecancellations(row) {
      this.$confirm(this.$t("msg[3]"), this.$t("header.tishi[1]"), {
        type: "warning",
      }).then(() => {
        let _data = {
          order_no: row.order_no,
        };
        bcancellations(_data)
          .then((res) => {
            this.$message({
              message: this.$t("msg[4]"),
              type: "success",
            });
            this.$emit("func", this.form);
          })
          .catch((err) => {});
      });
    },
    getMsgFormSon(datavue) {
      //分页
      this.changedata.page = datavue.page;
      this.typget();
    },
    typehide(row) {
      //切换
      this.type = row.name;
      this.changedata = {
        page: "1",
        wid: "1",
      };
      this.typget();
    },
    typget() {
      switch (this.type) {
        case "1":
          this.weituo();
          if (this.timer) {
            clearInterval(this.timer);
          }
          this.timer = setInterval(() => {
            this.weituo(true);
          }, 3000);
          break;
        case "2":
          this.chengjiao();
          if (this.timer) {
            clearInterval(this.timer);
          }
          this.timer = setInterval(() => {
            this.chengjiao(true);
          }, 3000);
          break;
        default:
          break;
      }
    },
    weituo(isSetInterval) {
      let _data1 = {
        code: this.code,
        order_type: "1",
      };
      tranData(_data1, isSetInterval)
        .then((res) => {
          this.requestData1 = res;
        })
        .catch((err) => {});
    },
    chengjiao(isSetInterval) {
      let _data2 = {
        code: this.code,
        order_type: "2",
      };
      tranData(_data2, isSetInterval)
        .then((res) => {
          this.requestData2 = res;
        })
        .catch((err) => {});
    },
  },
  created() {
    this.code = this.codetype;
    if (getToken("token")) {
      this.weituo();
      this.timer = setInterval(() => {
        this.weituo(true);
      }, 3000);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  components: {
    PagesSize,
  },
};
</script>
<style lang="less">
.pagination {
  background: #0a1017 !important;
  margin: 0;
  padding: 20px 0;
}
.el-table th,
.el-table tr,
.el-table__empty-block {
  background-color: #182330;
}
.el-tabs__nav-scroll {
  background-color: #182330;
}
</style>

